<template>
    <div class="cdkey-list-page">
        <el-card shadow="never" class="mt-4">
            <el-button type="primary" @click="onDialog">新增</el-button>
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="兑换码标题" prop="title"/>
                    <el-table-column label="兑换账号时长">
                        <template slot-scope="{row}">
                            {{ row.length }}{{ row.length_unit === 1 ? '天' :
                                row.length_unit === 2 ? '周' : '月' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="总兑换码数量" prop="total"/>
                    <el-table-column label="已兑换码数量" prop="consume_total"/>
                    <el-table-column label="生成类型">
                        <template slot-scope="{row}">
                            {{ row.style === 1 ? '有序字母/数字' : '随机数字' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建日期">
                        <template slot-scope="{row}">
                            {{ row.created_at | timeFormat }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onViewClick(row)">查看详情</el-button>
                            <!-- <el-button type="text" @click="onDeleteClick(row)" class="red-color">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
                <el-pagination
                    class="center"
                    @current-change="fetchData"
                    @size-change="fetchData"
                    :current-page.sync="form.page"
                    :page-size.sync="form.size"
                    layout="sizes, total, prev, pager, next, jumper"
                    :page-sizes="[10, 25, 50]"
                    :total="totalElements">
                </el-pagination>
            </div>
        </el-card>

        <el-dialog
            title="新增兑换码"
            :visible.sync="visible"
            :modal-append-to-body="false"
            width="60%"
        >
            <el-form
                ref="dialogForm"
                :model="dialogForm"
                :rules="rules"
                label-width="130px"
                label-suffix=" : "
                label-position="right"
                @submit.native.prevent>
                <el-form-item label="兑换码标题" prop="title">
                    <el-input
                        class="input-width"
                        v-model.trim="dialogForm.title"
                        placeholder="请输入兑换码标题"></el-input>
                </el-form-item>
                <el-form-item label="兑换码时长" prop="length">
                    <el-input
                        class="input-width"
                        type="number"
                        v-model.trim="dialogForm.length"
                        placeholder="请输入兑换码时长"></el-input>
                </el-form-item>
                <el-form-item label="生成类型" required>
                    <el-radio v-model="dialogForm.style" :label="1">有序字母/数字</el-radio>
                    <el-radio v-model="dialogForm.style" :label="2">随机数字</el-radio>
                </el-form-item>
                <el-form-item label="生成兑换码数量" prop="total">
                    <el-input
                        class="input-width"
                        type="number"
                        v-model.trim="dialogForm.total"
                        placeholder="请输入生成兑换码数量"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="text-center">
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            visible: false,
            data: [],
            form: {
                page: 1,
                size: 10,
                type: 1,
            },
            totalElements: 0,
            dialogForm: {
                title: '',
                length: '',
                style: 1,
                total: '',
                type: 1,
                length_unit: 1,
            },
            rules: {
                title: [
                    { required: true, message: '请输入兑换码标题', trigger: 'blur' },
                ],
                total: [
                    { required: true, message: '请输入生成兑换码数量', trigger: 'blur' },
                ],
                length: [
                    { required: true, message: '请输入兑换码时长', trigger: 'blur' },
                ],
            },
        };
    },
    filters: {
        timeFormat(time) {
            if (!time) return;
            return new TimeFormats().convertTime('', time);
        },
    },
    watch: {
        visible(val) {
            if (!val) {
                this.$refs.dialogForm.resetFields();
            }
        },
    },
    methods: {
        onSubmit() {
            this.$refs.dialogForm.validate((valid) => {
                if (!valid) return;
                this.loading = true;
                API.post('exchange_code_group', this.dialogForm).then(() => {
                    this.fetchData();
                    this.onDialog();
                    $ele.$message.success('新增成功');
                }).finally(() => this.loading = false);
            });
        },
        fetchData() {
            this.loading = true;
            API.get('exchange_code_group', {params: this.form}).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onDeleteClick(row) {
            $ele.$confirm('是否删除此兑换码组?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`exchange_code_group/${row.id}`).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onDialog() {
            this.visible = !this.visible;
        },
        onViewClick(row) {
            this.$router.push({
                name: 'Cdkey.Group',
                params: {
                    id: row.id || '',
                },
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.cdkey-list-page {
    .input-width {
        max-width: 300px;
    }

    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
